<template>
  <jl-base v-if="show">

    <jl-header>
      <mt-header title="新增要货单" :fixed="true">
        <i slot="left">
          <mt-button icon="back" @click="back"></mt-button>
        </i>
      </mt-header>
    </jl-header>

    <jl-content>
      <mt-navbar v-model="selected" class="mb10">
        <mt-tab-item id="base">基本信息</mt-tab-item>
        <mt-tab-item id="goods">商品信息</mt-tab-item>
      </mt-navbar>

      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="base">
          <div class="dld_body">
            <jl-from-search type="function"
                            label="选择登录单"
                            required
                            :text="formData.GCDLD01"
                            :function="callbackDld"
                            @ok="chooseStartOrder"
                            placeholder="请输入使用单位搜索">
              <div class='jl_form'>
                <div class='jl_form_item bor_bottom'>
                    <span class='w04 '>
                      {GCDLD01}
                    </span>
                  <span class='w08 tr'>
                      {JXSMC}
                    </span>
                  <span class='w12 font_size_small'>
                      {SYDW}
                    </span>
                  <span class='w12 font_size_small'>
                      {YHDH}
                    </span>
                  <i class='fa fa-angle-right'></i>
                </div>
              </div>
            </jl-from-search>

            <jl-from-select label="配送方式" :options="{'0': '自提', '1': '配送'}" default-key="1" v-model="formData.PSFS"/>
            <jl-from-datepicker required label="配送时间" v-model="formData.PSSJ"/>

            <jl-from-input required label="配送联系人" v-model="formData.KHXM_INPUT"/>
            <jl-from-input required label="配送联系方式" v-model="formData.KHDH"/>

            <jl-address label="配送地址" required v-model="formData.SHDZ"/>

          </div>

          <div class="dld_body">

            <jl-from-input label="保证金比例(%)" required v-model="formData.BZJBL"/>

          </div>

          <div class="dld_title">
            <span>余额列表</span>
          </div>
          <div class="dld_body">
            <jl-from-input label="可用余额" disabled :value="formData.KYYE |money"></jl-from-input>
            <jl-from-input label="预售余额" disabled :value="formData.YSYE |money"></jl-from-input>
            <jl-from-input label="可用返利" disabled :value="formData.FLYE |money"></jl-from-input>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>

      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="goods">
          <template v-for="(item,index) in formData.SPLB">
            <div class="dld_title">
              <span class="fl">{{item.GCSPMC}}</span>
              <span class="fl ml20"><i class="fa fa-phone-square mr5"></i>{{item.LXDHMX}}</span>
              <i class="fa fa-trash font_color font_size_large fr" @click="removeGoods(index)"></i>
            </div>
            <div class="dld_body">

              <div class="jl_form" @click="cli(item)">
                <div class="jl_form_item bor_bottom">
                  <span class="w04">商品名称</span>
                  <span class="w08 tr">{{item['GCSPMC']}}</span>
                  <i class="fa fa-search-plus"></i>
                </div>
              </div>
              <jl-from-input label="本次要货" required placeholder="请输入调整数量" type="number" v-model="item.YHSL"
                             @input="changeNum(item,index)"/>
              <jl-from-input disabled label="批复单价" :value="item.FXDJ | money"/>
              <jl-from-input disabled label="本次要货金额" :value="item.PFJE | money"/>
              <jl-from-input label="备注" required v-model="item.BZ"/>
            </div>

            <mt-popup style="height: 100%;width: 100%"
                      v-model="item.show"
                      position="right">
              <need-goods @close="$forceUpdate()"
                          @save="callGoods"
                          :data="item"
                          :index="index"
                          v-if="item.show"/>
            </mt-popup>

          </template>
        </mt-tab-container-item>
      </mt-tab-container>
    </jl-content>

    <jl-footer>
      <!--<div class="dld_title font_red" style="background-color: #f1f1f1;">
        <span>合计：3件商品，256,111,56.00元。</span>
      </div>-->
      <div class="footer_btn">
        <button class="none" @click="newDraft">保存草稿</button>
        <button @click="saveNew">提交</button>
      </div>
    </jl-footer>

  </jl-base>
</template>

<script>
  import NeedGoods from './NeedGoods';

  export default {
    components: {NeedGoods},
    name: 'new',
    data() {
      return {
        show: false,
        selected: 'base',
        formData: {
          bdbh: '1040',
          PSFS: {},
          PSSJ: '',
          KHXM_INPUT: '',
          KHDH: '',
          SPLB: [],
          SHDZ: [],
          BZJBL: 5,
          JLBH: 0,
          KYYE: 0,
          YSYE: 0,
          FLYE: 0,
        }
      }
    },
    methods: {
      back() {
        this.$router.back()
      },
      callbackDld() {
        let userInfo = $Utils.getUserInfo()
        return this.http.post('/api/queryGCYHD/ getGCDLD.do', {
          XmlData: {
            GSXX01: userInfo.PCRM_GSXX01,
            PersonID: userInfo.PCRM_CZY01,
            CompanyID: userInfo.PCRM_GSXX01
          }
        })
      },
      chooseStartOrder(item) {
        delete item['JLBH'];
        this.formData = {...this.formData, ...item}
        this.$engineer.searchNeedBalance({
          'GSXX01': item.GSXX01,
          'BM01': item.BM01,
          'WLDW01': item.WLDW01,
        })
          .then(v => {
            let data = v[0];
            if ($Utils.isNull(data)) return;
            this.formData.KYYE = data['KYYE'];
            this.formData.FLYE = data['FANLI_YE'];
            this.formData.YSYE = data['YUSHOU_YE'];
          })
      },
      queryGoodsList() {
        this.http.post('/api/queryGCSPLB/getSPLB.do', {
          XmlData: {
            'GCDLD01': this.formData.GCDLD01,
            'GSXX01': this.formData.GSXX01
          }
        }).then(v => {
          v = v.data.SPLB || []
          this.formData.SPLB = v
        })
      },
      saveNew() {
        this.formData.isDraft = false;
        this.save();
      },
      save() {
        $Utils.MessageBox.confirm('确定执行此操作?').then(action => {
          $Utils.loading();
          this.$engineer.needGoodsSave(this.formData).then(v => {
            $Utils.hideloading()
            this.back()
          }).catch(e => {
            $Utils.hideloading()
          })
        }).catch(e => {
        })
      },
      changeNum(item, i) {
        item.PFJE = item.PFDJ * item.YHSL

        let BZJDJ = (item.FXDJ * (this.formData.BZJBL / 100)).toFixed(2) * 1
        item.BZJDJ = BZJDJ
        if (!$Utils.isNull(item.YHSL)) {
          item.BZJ = (BZJDJ * item.YHSL).toFixed(2)
          item.HJJE = ((BZJDJ + item.FXDJ) * item.YHSL).toFixed(2)
        }
      },
      initData() {
        this.http.find("SCM_GCYHD", {
          bdbh: this.formData.bdbh,
          jlbh: this.formData.jlbh,
        })
          .then(v => {
            this.show = true;
            Object.assign(this.formData, v[0]);
          })
      },
      newDraft() {
        this.formData.isDraft = true;
        this.save();
      },
      callGoods(item, index) {
        this.formData.SPLB[index]['GCSPMC'] = item['GCSPMC'];
        this.formData.SPLB[index]['GCSPBM'] = item['GCSPBM'];
      },
      cli(item) {
        item.show = true;
        this.$forceUpdate();
      },
      removeGoods(index) {
        this.formData.SPLB.splice(index, 1)
      },
    },
    watch: {
      'formData.GCDLD01': function (n) {
        if ($Utils.isNull(n)) return
        this.queryGoodsList()
      },
      'formData.SPLB': function (n) {
        n.forEach(v => {
          v.YSZZSL = 0
          v.WBTDH = v.DJTDH
        })
      }
    },
    created() {
      if (!$Utils.isNull(this.$route.params)) {
        this.formData.jlbh = this.$route.params.jlbh;
        this.formData.bdbh = this.$route.params.bdbh;
        this.initData();
      } else {
        this.show = true;
      }
    },
  }
</script>

<style scoped>

</style>
